<template>
    <div>
        <div class="title">
            <el-icon>
                <ArrowLeftBold />
            </el-icon>
            <h2>章节设定</h2>
            <div class="seat"></div>
        </div>

        <div class="top">
            <div class="con">
                <div class="space-between">
                    <div>
                        <div>章节标題</div>
                        <div class="no-name">未命名章节</div>
                    </div>

                    <div class="dis-row edit-right">
                        <div><img class="sheding-image" src="@/assets/images/edit.png"></img></div>
                        <div class="edit-text" @click="dialogFormVisible = true">编辑</div>
                    </div>
                </div>

                <div class="top20">
                    <div>发布状态</div>
                    <div>
                        <el-radio>未发布</el-radio>
                    </div>
                    <div>
                        <el-radio>立即发布</el-radio>
                    </div>
                    <div>
                        <el-radio>定时发布</el-radio>
                    </div>
                </div>

                <div class="top10">
                    <el-date-picker style="width: 100%;" v-model="dataTime" type="datetime" format="[Week] ww"
                        placeholder="请选择发布日期" />
                </div>

                <div class="top10">
                    <div>
                        <el-radio>已下架</el-radio>
                    </div>
                </div>

                <!-- <div class="top20">
                    <div>付費设定</div>
                    <div>
                        <el-radio>免費</el-radio>
                    </div>
                    <div>
                        <el-radio>付費</el-radio>
                    </div>
                </div> -->

                <div class="jiesuo-box">
                    <!-- <div class="top20">
                        <div>解鎖点數</div>
                        <div class="top10">
                            <el-select placeholder="5"></el-select>
                        </div>
                        <div class="top10">
                            <el-checkbox>限時解鎖点數</el-checkbox>
                        </div>
                        <div class="duzhe-box">讀者可獲得限時閱讀 48 小時；如果取消勾選代表不提供讀者使用。</div>

                        <div class="top10">
                            <el-select placeholder="已停用限時解鎖点數"></el-select>
                        </div>
                    </div> -->



                </div>
            </div>
        </div>
 <van-popup v-model:show="dialogFormVisible" class="custom-popup" :style="{width:'75%'}" position="center" >
    <div class="popTitle">编辑章节標題</div>
        <!-- <el-dialog v-model="dialogFormVisible" title="编辑章节標題" center> -->
            <el-input class="input-zhangjie" :suffix-icon="Close" placeholder="请输入章节标題"></el-input>
            <div class="fenshu-box">
                5 / 65
            </div>
            <el-button type="primary" class="enter-btn">确定</el-button>
        <!-- </el-dialog> -->
</van-popup>
    </div>
</template>

<script setup>
import {
    ArrowLeftBold,
    Setting,
    EditPen,
    ArrowDown,
    Sort,
    MoreFilled,
    View,
    Tickets,
    Close
} from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
const dialogFormVisible = ref(false)
const dataTime = ref()

</script>

<style lang="scss" scoped>
.enter-btn {
    width: 60%;
    background-color: #FA715D;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3rem;
    margin-left: 20%;
    border: none;
    padding: 1.2rem 0;
    margin-top: 1.3rem;
}

.fenshu-box {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 1rem;
}

.edit-text {
    margin-left: 0.3rem;
}

/* 修改选中时的颜色 */
:deep(.el-radio-group) {
    --el-radio-checked-text-color: #FA715D;
    /* 选中文字颜色 */
    --el-radio-checked-input-border-color: #FA715D;
    /* 选中边框颜色 */
    --el-radio-checked-bg-color: #FA715D;
    /* 选中背景颜色 */
    --el-radio-checked-icon-color: #ffffff;
    /* 选中图标颜色 */
}

/* 或者直接覆盖样式 */
:deep(.el-radio.is-checked .el-radio__inner) {
    background-color: #FA715D;
    border-color: #FA715D;
}

:deep(.el-radio.is-checked .el-radio__label) {
    color: #FA715D;
}

.jiesuo-box {
    width: 90%;
    margin-left: 5%;
}

.duzhe-box {
    color: #718096;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.edit-right {
    color: #FA715D;
    font-size: 0.8rem;
}

.no-name {
    color: #718096;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.sheding-image {
    width: 1rem;
}

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 0.5rem;
    height: 4rem;
    background: #fff;

    .seat {
        width: 3rem;
        height: 100%;
        flex: 0 0 auto;
    }
}

.top {
    background: #fff;
    padding-left: 1rem;
    padding-right: 1rem;

    .con {
        width: 100%;
        max-width: 61.5rem;
        margin: 0 auto;
    }
}
.custom-popup {
    padding: 16px;
}
.popTitle {
    display: flex;
    padding: 0 0 16px 0;
    justify-content: center;
    font-weight: 700;
}
</style>